<template>
	<view>
		<view v-if="type != 'textarea'" class="cu-form-group">
			<view v-if="iconClass||label" class="title" :style="{'width':labelWidth,'text-align':labelAlign}">
				<text v-if="required" class="text-red " style="padding-right: 4rpx;" :style="{'font-size':fontSize}">*</text>
				<text v-if="iconClass" :class="iconClass?iconClass:''" style="padding-right: 6rpx;" :style="{'font-size':fontSize}"></text>
				<text v-if="label" :style="{'font-size':fontSize}">{{ label }}</text>
			</view>
			<textarea v-if="type == 'textarea'" 
				:value="value"
				:placeholder="placeholder" 
				placeholder-class="input-placeholder-class" 
				:disabled="disabled" 
				:maxlength="inputMaxlength"
				:focus="focus" 
				:autoHeight="autoHeight" 
				:fixed="fixed" 
				@input="onInput" 
				@blur="onBlur" 
				@focus="onFocus" 
				@confirm="onConfirm"
				@tap="inputClick" 
				:style="{'font-size':fontSize,'text-align':inputAlign}" />
			<input v-else 
				:type="type"
				placeholder-class="input-placeholder-class"
				:value="value" 
				:placeholder="placeholder"
				:password="password&&showPassword"
				:style="{'font-size':fontSize,'text-align':inputAlign,'padding-right':!rightIconClass&&!rightButtonFlag?'5rpx':'0'}"
				:maxlength="inputMaxlength"
				:disabled="disabled"
				:focus="focus"
				:confirmType="confirmType"
				@focus="onFocus"
				@blur="onBlur"
				@input="onInput"
				@confirm="onConfirm"
				@tap="inputClick"/>
			<text style="padding-left: 20rpx;" :style="{'font-size':fontSize}" v-if="rightIconClass&&!password&&!rightButtonFlag" :class="rightIconClass?rightIconClass:''" @click="rightIconClassClick"></text>	
			<text style="padding-left: 20rpx;" :style="{'font-size':fontSize}" v-if="password" class="iconfont" :class="[!showPassword ? 'icon-eye' : 'icon-eye-close',rightIconClass]" @click="rightIconClassClick"></text>
			<button v-if="rightButtonFlag&&!rightButton.textFlag" class="cu-btn shadow " type="" :disabled="rightButton.disabled" :class="rightButton.bg" :style="{'font-size':fontSize}" @click="rightButtonClick" >{{rightButton.text}}</button>
			<text style="padding: 0 5rpx 0 20rpx;" v-if="rightButtonFlag&&rightButton.textFlag" :style="{'font-size':fontSize,'color':rightButton.color}" :class="rightButton.bg" @click="rightButtonClick">{{rightButton.text}}</text>	
		</view>
		<view v-else class="cu-form-group-textarea">
			<view v-if="iconClass||label" style="display: flex;align-items:center;justify-content:space-between;min-height:90rpx" >
				<view v-if="iconClass||label" style="padding-right: 30rpx;font-size: 28rpx;color: #333;position: relative;height: 45rpx;line-height: 45rpx;" :style="{'width':labelWidth,'text-align':labelAlign}">
					<text v-if="required" class="text-red " style="padding-right: 4rpx;" :style="{'font-size':fontSize}">*</text>
					<text v-if="iconClass" :class="iconClass?iconClass:''" style="padding-right: 6rpx;" :style="{'font-size':fontSize}"></text>
					<text v-if="label" :style="{'font-size':fontSize}">{{ label }}</text>
				</view>
				<view>
					<text style="padding-left: 20rpx;" :style="{'font-size':fontSize}" v-if="rightIconClass&&!password&&!rightButtonFlag" :class="rightIconClass?rightIconClass:''" @click="rightIconClassClick"></text>
					<text style="padding-left: 20rpx;" :style="{'font-size':fontSize}" v-if="password" class="iconfont" :class="[!showPassword ? 'icon-eye' : 'icon-eye-close',rightIconClass]" @click="rightIconClassClick"></text>
					<button v-if="rightButtonFlag&&!rightButton.textFlag" class="cu-btn shadow " type="" :disabled="rightButton.disabled" :class="rightButton.bg" :style="{'font-size':fontSize}" @click="rightButtonClick" >{{rightButton.text}}</button>
					<text style="padding-left: 20rpx;" v-if="rightButtonFlag&&rightButton.textFlag" :style="{'font-size':fontSize,'color':rightButton.color}" :class="rightButton.bg" @click="rightButtonClick">{{rightButton.text}}</text>	
					<text style="padding-left: 20rpx;" v-if="rightText" :style="{'font-size':fontSize,'color':rightText.color}" :class="rightText.textClass" >{{rightText.text}}</text>	
				</view>
			</view>
			<textarea
				:value="value"
				:placeholder="placeholder" 
				placeholder-class="input-placeholder-class" 
				:disabled="disabled" 
				:maxlength="inputMaxlength"
				:focus="focus" 
				:autoHeight="autoHeight" 
				:fixed="fixed" 
				@input="onInput" 
				@blur="onBlur" 
				@focus="onFocus" 
				@confirm="onConfirm"
				@tap="inputClick" 
				style="margin-bottom: 20rpx;line-height: 1.2em;height: 4.6em;width: 100%;color: #222;flex: 1;padding: 0;"
				:style="{'font-size':fontSize,'text-align':inputAlign}" />
		</view>
	</view>
</template>

<script>
	export default {
		name:"zh-input",
		props: {
			iconClass: {
				type:[Array, String],
				default(){
					return ''
				}
			},
			rightIconClass: {
				type:[Array, String],
				default(){
					return ''
				}
			},
			rightButtonFlag:{
				type: Boolean,
				default: false
			},
			rightButton: {
				type: Object,
				default:null,
			},
			rightText: {
				type: Object,
				default:null,
			},
			value: {
				type: String,
				default: ''
			},
			required: Boolean,
			password: {
				type: Boolean,
				default: false
			},
			label:String,
			placeholder: {
				type: String,
				default: '请填写'
			},
			type: {
				type: String,
				default: 'text'
			},
			fontSize: {
				type: String,
				default: '28rpx'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			// 文本域是否自动增高
			autoHeight: {
				type: Boolean,
				default: true
			},
			// 左边标题的宽度单位rpx
			labelWidth: {
				type: [Number, String],
				default: 'auto'
			},
			// 标题对齐方式，left|center|right
			labelAlign: {
				type: String,
				default: 'right'
			},
			// 输入框对齐方式
			inputAlign: {
				type: String,
				default: 'left'
			},
			maxlength: {
				type: [Number, String],
				default: -1
			},
			confirmType: {
				type: String,
				default: 'done'
			},
			focus: Boolean,
			fixed: Boolean
		},
		data() {
			return {
				showPassword:true
			}
		},
		computed:{
			// 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，给用户可以传入字符串数值
			inputMaxlength() {
				return Number(this.maxlength)
			}
		},
		methods: {
			rightIconClassClick() {
				if(this.password){
					 this.showPassword = !this.showPassword;
				}else{
					this.$emit('right-icon-click');
					this.$emit('click');
				}
				
			},
			rightButtonClick() {
				this.$emit('right-button-click');
			},
			onInput(event) {
				this.$emit('input', event.target.value);
			},
			onFocus(event) {
				this.focused = true;
				this.$emit('focus', event);
			},
			onBlur(event) {
				this.focused = false;
				this.$emit('blur', event);
			},
			onConfirm(e) {
				this.$emit('confirm', e.detail.value);
			},
			onClear(event) {
				this.$emit('input', '');
			},
			inputClick() {
				this.$emit('click');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.input-placeholder-class {
		color: $uni-text-color-placeholder;
	}
</style>
